import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const ProgressBar = ({ current, total, onPause, onResume, onCancel, message, isPaused }) => {
  const progressPercent = total > 0 ? (current / total) * 100 : 0;
  const isDisabled = current === total

  return (
    <View style={styles.progressContainer}>
      <View style={styles.progressBarBackground}>
        <View
          style={[
            styles.progressBarFill,
            { width: `${progressPercent}%` }
          ]}
        />
      </View>

      <Text style={styles.progressText}>
        {message || ''}{current}/{total}
      </Text>

      <View style={styles.buttonGroup}>
        <TouchableOpacity
          style={[styles.button, styles.pauseButton, (isDisabled || isPaused) && styles.disabledButton]}
          onPress={onPause}
          disabled={isDisabled || isPaused}
        >
          <Text style={styles.buttonText}>暂停</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.button, styles.resumeButton, (isDisabled || !isPaused) && styles.disabledButton]}
          onPress={onResume}
          disabled={isDisabled || !isPaused}
        >
          <Text style={styles.buttonText}>继续</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[styles.button, styles.cancelButton, isDisabled && styles.disabledButton]}
          onPress={onCancel}
          disabled={isDisabled}
        >
          <Text style={styles.buttonText}>取消</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  progressContainer: {
    marginTop: 20,
    paddingHorizontal: 10,
  },
  progressBarBackground: {
    height: 10,
    backgroundColor: '#e0e0e0',
    borderRadius: 5,
    marginBottom: 8,
    overflow: 'hidden',
  },
  progressBarFill: {
    height: '100%',
    backgroundColor: '#4CAF50',
    borderRadius: 5,
  },
  progressText: {
    textAlign: 'center',
    fontSize: 16,
    color: '#333',
    marginBottom: 12,
  },
  buttonGroup: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 5,
  },
  button: {
    paddingVertical: 8,
    paddingHorizontal: 15,
    borderRadius: 4,
    minWidth: 80,
    alignItems: 'center',
  },
  pauseButton: {
    backgroundColor: '#FFC107',
  },
  resumeButton: {
    backgroundColor: '#4CAF50',
  },
  cancelButton: {
    backgroundColor: '#F44336',
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
  },
  disabledButton: {
    opacity: 0.5,
    backgroundColor: 'gray',
  }
});

export default ProgressBar;